<template>
    <div>
        <!-- 這是頂部導航欄 satrt -->
        <topBack :title="title" />
         <!-- 這是頂部導航欄 end -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="lunbo in lunbo" :key="lunbo.id">
                <van-image
                        height="100%"
                        width="100%"
                        fit="contain"
                        :src="'http://192.168.40.177:8008/api/'+lunbo"
            />
            </van-swipe-item>
        </van-swipe>


        <div class="sp" >
        <span class="sp-je">￥{{jiage}}</span><br>
            <span class="sp-wz">高清防爆，耐磨防刮</span>
            <div class="sp-da">
                <div class="sp1" style="float: right; text-align: center; margin-right: 5px; color: rgb(144, 147, 153); ">
                   {{liulan}}<br>
                    <span>浏览</span>
                </div>
                <div class="sp1" style="float: right; text-align: center; margin-right: 5px; color: rgb(144, 147, 153);">
                    {{sales}}
                    <br>
                    <span>销量</span>
                </div>

            </div>

        </div>

        <van-cell is-link @click="showPopup">选择规格：</van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
            <van-sku
                    v-model="show"
                    :sku="sku"
                    :goods="goods"
                    :goods-id="goodsId"
                    :quota="quota"
                    :quota-used="quotaUsed"
                    :hide-stock="sku.hide_stock"
                    :message-config="messageConfig"
                    @buy-clicked="onBuyClicked"
                    @add-cart="onAddCartClicked"
            />
        </van-popup>

        <div class="twxq">
            <span class="twxq-wz">图文详情：</span>
           <div v-html="image">

           </div>
        </div>
        <van-goods-action >
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button type="warning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>

    </div>
</template>

<script>
    import Vue from 'vue';
    import { Swipe, SwipeItem } from 'vant';
    import { Lazyload } from 'vant';
    Vue.use(Lazyload);
    import { Sku } from 'vant';
    Vue.use(Sku);
    import axios from 'axios'
    import {Notify} from 'vant'
    import topBack from '@/components/topBack.vue'
    export default {
        name: "commodity",
        components:{
            topBack
        },
        created() {

            const id = this.$route.params.id
            console.log(id)

            axios({
                url:"http://192.168.40.177:8008/api/product/detail/" + id,
                method:"GET"
            }).then(res =>{
                console.log(res)

                const data = res.data

                console.log(data)

                const  { status,msg } = data //对象结构赋值
                if(status ==200){
                     const da = data.data
                    this.$data.lunbo = da.storeInfo.sliderImageArr
                    this.$data.sales = da.storeInfo.sales
                    this.$data.liulan = da.storeInfo.browse
                    this.$data.jiage = da.storeInfo.price
                    this.$data.xiangqing = da.storeInfo.storeinfo
                    this.$data.shangpingmc = da.storeInfo.storeName

                    this.$data.image = da.storeInfo.description

                    this.$data.sku.price =  da.storeInfo.price
                    this.$data.goods.picture = 'http://192.168.40.177:8008/api/'+ da.storeInfo.image
                   // this.$data.sku.tree[0].v

                    const fenleis = da.productAttr["0"].attrValueArr

                    for (let i =0;i<fenleis.length;i++){

                        const fenlei = fenleis[i]
                        this.$data.sku.tree[0].v[i] = {

                            id:i+1,
                            name:fenlei
                        }
                    }
                }else {
                    Notify(msg)
                }


            })
        },
        data(){
            return {
                title:'商品詳情',
                shangpingmc:'',
                xiangqing:'',
                sales:0,
                jiage:0,
                liulan:0,
                lunbo:[],
                sales:0,
                show: false,
                current: 0,
                image:'<p> <img style="max-width: 100%;" src="/file/pic/e23d7888-bfcc-48cb-b10b-f79386a076b6.jpg"></p>',
                sku: {
                    tree:[
                        {
                            k: '分类',
                            v: [
                                {
                                    id: '1',
                                    name: '【纳米抗指纹】 *2片',
                                    previewImgUrl: 'http://192.168.40.177:8008/api/file/pic/2b61d366-9ff9-4e1b-b99c-f9fd7c4c4908_source.jpg', // 用于预览显示的规格类目图片
                                },
                                {
                                    id: '2',
                                    name: '【加强护眼抗蓝光】 *2片',
                                    previewImgUrl: 'http://192.168.40.177:8008/api/file/pic/2b61d366-9ff9-4e1b-b99c-f9fd7c4c4908_source.jpg',
                                }
                            ],
                            list: [
                                {
                                    id: 1, // skuId
                                    s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                                    s2: '2', // 规格类目 k_s 为 s2 的对应规格值 id
                                    price: 100, // 价格（单位分）
                                    stock_num: 110 // 当前 sku 组合对应的库存
                                }
                            ],
                        }
                    ],
                    price: '20.00', // 默认价格（单位元）
                    stock_num: 0, // 商品总库存
                },
                goods: {
                    picture: 'http://192.168.40.177:8008/api/file/pic/2b61d366-9ff9-4e1b-b99c-f9fd7c4c4908_source.jpg'
                },
                messageConfig: {
                    // 数据结构见下方文档
                },
            };
        },
        methods: {
            showPopup() {
                this.show = true;
            },
            onChange(index) {
                this.current = index;
            },
        },
    }
</script>

<style >
    .van-cell {
       width: 100% !important;
        margin: 5px;
        padding: 18px !important;
        border-radius: 10px;
    }
   
    .sp-da{
        position: absolute;
        right: 0;
        top: 10px;
        padding: 0 10px;
    }
    .sp1{
        font-size: 10px;
    }
   
    .van-icon-arrow-left:before {
        content: '\e668';
        color: #8aa3ef;
        font-size: 17px;
    }
    
    .container{
        overflow: auto;
    }
    .twxq .van-image{
        margin-top: 20px;
    }
    .twxq-wz{
     font-size: 14px;
    }
   .twxq{
       background-color: white;
       border-radius: 10px;
       padding: 15px;
       margin-left: 5px;
       margin-right: 5px;
       margin-bottom: 500px;

   }
    .spgg-wz{
        font-size: 14px;
    }
    .spgg{
        background-color: white;
        padding: 15px;
        border-radius: 10px;
        margin: 5px;
    }
    html,body,#app{
        background-color: #f6f5f5;
    }
    .my-swipe .van-swipe-item {
     background-color: #f6f5f5;
        margin: 5px;
    }
    .sp-je{
        font-size: 30px;
        color: #f8761a;
    }
    .sp{
        position: relative;
        background-color: white;
        padding: 10px;
        border-radius: 10px;
        margin: 5px;
    }
    .sp-wz{
        font-size: 12px;
        line-height: 2.5em;
    }

</style>